<template>
  <div>
    <PlusPage
      :columns="tableConfig"
      :table="{ adaptive: true, hasIndexColumn: true }"
      :request="getList"
    >
      <!-- 查看评估详情 -->
      <template #plus-cell-riskDetail="{ row }">
        <el-button v-if="row.riskDetail" type="primary" link @click="onViewRiskDetail(row)">
          查看评估详情
        </el-button>
        <div v-else>-</div>
      </template>

      <!-- 工具栏 -->
      <template #title>
        <el-button type="primary" @click="onExport">导出</el-button>
      </template>
    </PlusPage>

    <!-- 评估详情dialog -->
    <RiskDetailDialog v-model="visible" :data="riskDetailData" />
  </div>
</template>

<script lang="ts" setup>
import type { WaybillLoanLeadsModel, WaybillLoanRiskDetailModel } from '@/api/type'
import { formatEndOfDay, formatStartOfDay } from '@wlydfe/core'
import { omit } from 'lodash-es'
import { companyApi } from '@/api'
import { tableConfig } from './config'
import RiskDetailDialog from './cpns/risk-detail-dialog.vue'

const { getList } = usePage<WaybillLoanLeadsModel>({
  fetchData: companyApi.getWaybillLoanLeadsList,
  options: {
    transformQuery: query => {
      if (query?.createdDate) {
        const [startDate, endDate] = query.createdDate
        if (startDate && endDate) {
          query.createdStartDate = formatStartOfDay(startDate)
          query.createdEndDate = formatEndOfDay(endDate)
          return omit(query, ['createdDate'])
        }
      }
      return query
    },
  },
})

// 查看评估详情
const visible = ref(false)
const riskDetailData = ref<WaybillLoanRiskDetailModel[]>([])
const onViewRiskDetail = (row: WaybillLoanLeadsModel) => {
  visible.value = true
  riskDetailData.value = row.riskDetails || []
}

// 导出
const onExport = () => {
  console.log('导出')
}
</script>
